<template>
  <div class="goodsImportSales">
    <div class="goodsImportSales-top">
      <van-row >
        <van-col span="8">
          <van-button  style="width:100%;background: #F7F7F7;border-radius: 0!important;" @click="timePopup=true">{{headerTime}}<i class="iconfont icon-xia"></i></van-button>
        </van-col>
        <van-col span="8">
          <van-button  style="width:100%;background: #F7F7F7;border-radius: 0!important;" @click="sortShow=true">店仓<i class="iconfont icon-xia"></i></van-button>
        </van-col>
        <van-col span="8">
          <van-button  style="width:100%;background: #F7F7F7;border-radius: 0!important;" @click="keyWordShow=true">搜索<i class="iconfont icon-xia"></i></van-button>
        </van-col>
      </van-row>
    </div>

    <div class="goodsImportSales-content">
      <!--滚动加载-->
      <van-list
        v-model="loading"
        :finished="finisheds"
        @load="getData"
        :offset="offset"
        :immediate-check="scrollBool"
      >

        <div v-if="typeof goodsAll=='string'" style="color:#ddd;padding:20px 0;background: #fff!important;">{{goodsAll}}</div>
        <van-row v-else v-for="(item,index) in goodsAll" :key="index" style="padding:10px 0;margin:5px 0;background: #fff!important;border-radius: 3px;">
          <van-col span="6" style="padding:3px 10px;">

            <!--memberDetails   http://imgcdn.lanaoboxiang.com/-->
            <img v-if="item.item.images.length==0" class="listImg"  src="../../images/noimg.jpg" alt="">
            <img v-else class="listImg" :src="memberDetails.imgaes+item.item.images" alt="">

          </van-col>
          <van-col span="18" style="padding:0 10px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">
            <van-row style="text-align: left">
              <!--<van-col span="24" style="padding:5px 0;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;color:#000;">-->
                <!--&lt;!&ndash;{{stores[index]['name']}}&ndash;&gt;-->
              <!--</van-col>-->
              <van-col span="24" style="padding:5px 0;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;color:#000;">
                商品名:{{item.item.title}}
              </van-col>
              <van-col span="12" style="padding:5px 0;">进货数量:<span :style="{color:color}">{{item.count}}</span></van-col>
              <van-col span="12" style="padding:5px 0;">单价:<span :style="{color:color}">￥{{item.item.price}}</span></van-col>
              <van-col span="12" style="padding:5px 0;">销售数量:<span :style="{color:color}">{{item.xs_num}}</span></van-col>
              <van-col span="12" style="padding:5px 0;">消化率:<span :style="{color:color}">{{item.xiaohua}}</span></van-col>
            </van-row>
          </van-col>
        </van-row>
        <van-row :style="{display:noData}" class="noDatas">
          <van-col span="24">数据已加载完</van-col>
        </van-row>
      </van-list>

    </div>

    <!--时间弹出层-->
    <van-popup v-model="timePopup" @click-overlay="timeRadio=timeRadioPrev" class="timeMask" >
      <div style="overflow: scroll;height:80%;">
        <van-radio-group v-model="timeRadio">
          <van-cell-group>
            <van-cell v-for="(val,keys) in selects" :title="val.name" :key="keys" clickable @click="timeCheckFn(val.type,val.name)">
              <van-radio :name="val.type" />
            </van-cell>

            <van-cell title="自定义时间段" clickable @click="timeRadio = '',timeDate=true,headerTime='自定义'">
              <van-radio name="" />
            </van-cell>
          </van-cell-group>
        </van-radio-group>
      </div>
      <!--按钮-->
      <van-row style="padding:10px 0;">
        <van-col span="12" style="padding:0 10px;">
          <van-button  class="maskBtn"  @click="timeRadio=timeRadioPrev,timePopup=false,headerTime=headerTimeprev">取消</van-button>
        </van-col>
        <van-col span="12" style="padding:0 10px;">
          <van-button  type="primary" class="maskBtn"  @click="getTsList">确定</van-button>
        </van-col>
      </van-row>
    </van-popup>

    <!--自定义天数弹出层-->
    <van-popup v-model="timeDate" @click-overlay="timeSlotResult=''" :overlay="true" class="zdyMask" >

      <van-cell-group>
        <van-cell title="开始时间" is-link :value="startCurrentDate" @click="startTimes=true"/>
      </van-cell-group>
      <van-cell-group>
        <van-cell title="结束时间" is-link :value="EndCurrentDate" @click="endTimes=true"/>
      </van-cell-group>
      <!--按钮-->
      <van-row style="padding:10px 0;">
        <van-col span="12" style="padding:0 10px;">
          <van-button  class="maskBtn"  @click="timeDate=false,timeSlotResult=''">取消</van-button>
        </van-col>
        <van-col span="12" style="padding:0 10px;">
          <van-button  type="primary"  class="maskBtn" @click="getTimeDate">确定</van-button>
        </van-col>
      </van-row>
    </van-popup>

    <!--开始时间的弹出层-->
    <van-popup v-model="startTimes" class="sTimeMask" >
      <van-datetime-picker
        v-model="currentDate"
        type="date"
        :min-date="minDate"
        @confirm="startTimeFn"
        @cancel="startTimes=false"
      />
    </van-popup>

    <!--结束时间的弹出层-->
    <van-popup v-model="endTimes" class="sTimeMask">
      <van-datetime-picker
        v-model="endCurrentDates"
        type="date"
        :min-date="minDate"
        @confirm="endTimeFn"
        @cancel="endTimes=false"
      />
    </van-popup>

    <!--店仓弹层-->
    <van-popup v-model="sortShow" @click-overlay="storeIds=storeIdsPrev" :overlay="true" class="dcMask">

      <div style="overflow: scroll;height:87%">
        <!--stores-->
        <div v-if="stores.length==0" style="color:#ddd;padding:10px 0;">暂无店仓</div>
        <van-checkbox-group v-else v-model="storeIds">
          <van-cell-group>
            <van-cell v-for="(item,index) in stores" :title="item.name" :key="index" >
              <van-checkbox :name="item.id" />
            </van-cell>
          </van-cell-group>
        </van-checkbox-group>
      </div>
      <!--按钮-->
      <van-row style="padding:10px 0;border-top:1px solid #ddd;">
        <van-col span="8" style="padding:0 10px;">
          <van-button  class="maskBtn"  @click="resetFn">重置</van-button>
        </van-col>
        <van-col span="8" style="padding:0 10px;">
          <van-button  class="maskBtn"  @click="storeIds=storeIdsPrev,sortShow=false">取消</van-button>
        </van-col>
        <van-col span="8" style="padding:0 10px;">
          <van-button  type="primary" class="maskBtn" @click="getSortFn">确定</van-button>
        </van-col>
      </van-row>
    </van-popup>

    <!--关键字搜索弹层-->
    <van-popup v-model="keyWordShow"  @click-overlay="keyWordValue=keyWordValuePrev" :overlay="true" class="sousuoMask" >
      <p>搜索商品</p>
      <van-cell-group style="margin:5% 3%;">
        <van-field v-model="keyWordValue" style="border:1px solid #ddd;border-radius:5px;" placeholder="请输入商品信息"  @keyup.enter="getSearch"/>
      </van-cell-group>

      <van-row style="padding:10px 0;">
        <van-col  style="padding:0 10px;" span="8">
          <van-button class="maskBtn"  @click="keyWordValue=''">清空</van-button>
        </van-col>
        <van-col  style="padding:0 10px;" span="8">
          <van-button  class="maskBtn"  @click="keyWordValue=keyWordValuePrev,keyWordShow=false">取消</van-button>
        </van-col>
        <van-col  style="padding:0 10px;" span="8">
          <van-button  class="maskBtn" :disabled="searchStatus" type="primary" @click="getSearch" >搜索</van-button>
        </van-col>
      </van-row>
    </van-popup>

    <!--底部数量-->
    <div class="goodsImportSales-bottom">
      <span :style="{color:color}">{{total}}</span>条数据
    </div>

    <!--返回按钮-->
    <backs></backs>


  </div>
</template>

<script>
  import { mapState } from 'vuex';
  import backs from "@/components/menu/backPrev";
  export default {
    name: "goodsImportSales",
    computed: {
      ...mapState({
        memberDetails:"data"
      })
    },
    components: {
      backs
    },
    data(){
      return {
        color:'#0D90EB',
        searchStatus:false,
        headerTime:'今日',
        headerTimeprev:'今日',
        goodsAll:[],//商品信息汇总
        storeSalesList:'',
        timePopup:false,
        timeRadio:'today',
        timeRadioPrev:'today',
        selects:[
          {name:"今日",type:"today"},
          {name:"昨日",type:"yesterday"},
          {name:"本周",type:"thisWeek"},
          {name:"上周",type:"lastWeek"},
          {name:"本月",type:"thisMonth"},
          {name:"上月",type:"lastMonth"}
        ],
        //时间弹层
        timeDate:false,
        timeSlotResult:'',
        startCurrentDate:'',//开始时间
        EndCurrentDate:'',//结束时间

        //开始时间的弹层
        startTimes:false,
        minHour: 10,
        maxHour: 20,
        minDate: new Date(1900,1,1),
        maxDate: new Date(2050,12,31),
        currentDate: {},//当前时间

        //结束时间的弹层
        endTimes:false,
        endCurrentDates:{},//最终的结束时间

        //店仓弹层
        sortShow:false,
        stores:[],
        storeIds:[],
        storeIdsPrev:[],//记录值
        sortResult:'0',//排序值

        //关键字弹层
        keyWordShow:false,
        keyWordValue:'',
        keyWordValuePrev:'',

        //排序弹层
        sortShows:false,
        sortResults:"0",

        //滚动加载
        list: [],
        loading: false,
        finisheds: false,
        scrollBool:true,
        offset:200,

        //分页
        currentPage:1,//当前页
        pageSize:10,
        total:0,
        pageAll:0,//总页数
        noData:"none"

      }
    },
    methods:{
      timeCheckFn(type,name){
        this.timeRadio = type
        this.headerTime = name;
      },
      //点击时间确定按钮
      getTsList(){
        this.timePopup=false;
        this.headerTimeprev = this.headerTime
        this.timeRadioPrev=this.timeRadio;
        this.noData = "none"
        this.goodsAll=[];
        this.finisheds=false;
        this.currentPage=1;
        this.loading=true;
        this.getData();
      },
      getTimeDate(){
        this.timeDate=false;
      },
      //点击开始时间的确定按钮
      startTimeFn(){
        this.startTimes=false;
        var y = this.currentDate.getFullYear();
        var m = this.currentDate.getMonth() + 1;
        m = m < 10 ? '0' + m : m;
        var d = this.currentDate.getDate();
        d = d < 10 ? ('0' + d) : d;
        this.startCurrentDate=y+"-"+m+"-"+d;

      },
      //点击结束时间的确定按钮
      endTimeFn(){
        this.endTimes=false;
        var y = this.endCurrentDates.getFullYear();
        var m = this.endCurrentDates.getMonth() + 1;
        m = m < 10 ? '0' + m : m;
        var d = this.endCurrentDates.getDate();
        d = d < 10 ? ('0' + d) : d;
        this.EndCurrentDate=y+"-"+m+"-"+d;
      },
      //初始化时间值
      nowTime(){
        //获取开始时间
        var myDate = new Date();
        var mytime=myDate.getMonth();
        var y=myDate.getFullYear();
        var t=myDate.getDate();        //获取当前日(1-31)

        this.currentDate=new Date(y,mytime,t);
        this.endCurrentDates=new Date(y,mytime,t);
        //默认赋值
        this.startCurrentDate=y+"-"+(mytime+1)+"-"+t;
        this.EndCurrentDate=y+"-"+(mytime+1)+"-"+t;

      },
      //重置
      resetFn(){
        this.storeIds=[];
      },
      //点击店仓中的确定按钮
      getSortFn(){
        this.sortShow=false;
        this.storeIdsPrev=this.storeIds;
        this.goodsAll=[];
        this.noData = "none"
        this.finisheds=false;
        this.currentPage=1;
        this.loading=true;
        this.getData();
      },
      //点击搜索的确定按钮
      getSearch(){
        this.keyWordShow=false;
        this.searchStatus=true;
        this.keyWordValuePrev=this.keyWordValue;
        this.noData = "none";
        this.goodsAll=[];
        this.finisheds=false;
        this.currentPage=1;
        this.loading=true;
        this.getData();
        // this.keyWordValue="";
      },
      //获取所有店仓
      getDianCang(){
        var $this=this;
        this.$http.setting.get('store')
          .then(function (response) {
            // $this.stores=response.data.data;
            // console.log(response.data.data);
            var empId = localStorage.getItem('empId')
            if(empId&&response.data.code){
              $this.$toast.fail('店仓'+response.data.message);
              $this.$router.go(-1)
              return;
            }
            // 过滤直营店
            for(var i = 0;i<response.data.data.length;i++){
              // if(response.data.data[i].type != 1){
              //   $this.stores.push(response.data.data[i])
              // }
              // console.log(11)
              $this.stores.push(response.data.data[i])
              // $this.stores=response.data.data.length>0?response.data.data:[];
            }
          })
          .catch(function (error) {
            console.log(error);
          });
      },
      //获取商品进销汇总
      getData(){
        var $this=this;
         this.$http.item.post('/itemtable/importsales',{
           page:$this.currentPage,
           pageSize:$this.pageSize,
           start_time:$this.startCurrentDate,
           end_time:$this.EndCurrentDate,
           date_type:$this.timeRadio,
           crux:$this.keyWordValuePrev,
           store_id:$this.storeIds,
         })
           .then(function (response) {
             $this.currentPage=response.data.data.current_page+1;
             // console.log(response.data.data);
             $this.pageAll=response.data.data.last_page;
             $this.total=response.data.data.total;

             for(var i=0;i<response.data.data.data.length;i++){
                //把进货数量转换为整型
               response.data.data.data[i].count=parseInt(response.data.data.data[i].count);
               $this.goodsAll.push(response.data.data.data[i]);
             }
             $this.loading = false;

             if(!response.data.data.data.length){
               $this.finisheds = true;
               $this.goodsAll="未找到相关数据";
             } else if ($this.goodsAll.length >= response.data.data.total) {
               $this.finisheds = true;
               $this.noData = "block";
             }
             $this.searchStatus=false;
           })
           .catch(function (error) {
             $this.$toast.fail('登陆过期，请重新登陆');
             console.log(error);
           });
      }
    },
    mounted(){
      this.getDianCang();
      this.nowTime();
      // this.getData();
    }
  }
</script>

<style scoped>
  .goodsImportSales{
    font-size:14px;
    color:#666;
  }
  /*变宽和弹出层的*/
  .goodsImportSales .van-cell{
    border-bottom:1px solid #e5e5e5;
  }
  .goodsImportSales .van-cell:first-child{
    border-top:1px solid #e5e5e5;
  }
  .goodsImportSales [class*=van-hairline]::after{
    border:0;
  }

  .goodsImportSales-top{
    position: fixed;
    top:0;
    left:0;
    width:100%;
    background: #fff;
    z-index: 99;
  }
  .goodsImportSales .van-popup{
    width:100%;
  }
  .goodsImportSales .van-cell{
    text-align: left;
    font-size:12px;
  }
  .goodsImportSales-content{
    margin-top:45px;
    margin-bottom:30px;
    padding:5px;
  }
  .goodsImportSales-bottom{
    position: fixed;
    bottom:0;
    left:0;
    z-index: 999;
    background: #fff;
    width:100%;
    padding:5px 0;
    border-top:1px solid #ddd;
  }
  .goodsImportSales .van-pagination{
    line-height: 30px!important;
  }

  .timeMask{
    width:320px!important;background: #fff!important;border-radius: 5px;overflow: hidden;border-bottom:1px solid #ddd;
  }
  .maskBtn{
    width:100%;height:38px;line-height: 38px;
  }
  .zdyMask{
    width:320px!important;height:auto!important;padding:10px 0;background: #fff!important;border-radius: 5px;

  }
  .sTimeMask{
    width:320px!important;height:auto!important;border-radius: 5px;
  }
  .listImg{
    width:60px;height:81px;
  }
  .dcMask{
    width:320px!important;height:440px;padding:5px 0;margin-bottom:10px;background: #fff!important;border-radius: 5px;
  }
  .sousuoMask{
    width:320px!important;padding-top:10px;background: #fff!important;border-radius: 5px;
  }
  .sousuoMask>p{
    font-size:16px;color:#888
  }

</style>
